<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
                :delFunc="handleDelete" :changePage="changePage" :editFunc="handleEdit">
                <!-- <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template> -->
                <template #status="{ rows }">
                    <el-tag type="success" v-if="rows.status">发货</el-tag>
                    <el-tag type="danger" v-else>未发货</el-tag>
                </template>
                <template #zip_url="{ rows }">
                    <el-button type="primary" @click="clickDownload(rows.zip_url)">点击下载</el-button>
                </template>
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
        </el-dialog>
        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
            <TableDetail :data="viewData"></TableDetail>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import { CirclePlusFilled } from '@element-plus/icons-vue';
    import { User } from '@/types/user';
    import { agentOrderList } from '@/api';
    import TableCustom from '@/components/table-custom.vue';
    import TableDetail from '@/components/table-detail.vue';
    import TableSearch from '@/components/table-search.vue';
    import { FormOption, FormOptionList } from '@/types/form-option';

    // 查询相关
    const query = reactive({
        no: '',
    });
    const searchOpt = ref < FormOptionList[] > ([
        { type: 'input', label: '订单ID:', prop: 'no' }
    ])
    const handleSearch = () => {
        page.no = query.no
        changePage(1);
    };

    // 表格相关
    let columns = ref([
        { prop: 'no', label: '订单ID', },
        { prop: 'bot_id_str', label: '机器人ID', width: 120 },
        { prop: 'tg_chatid', label: '用户ID' },
        { prop: 'tg_username', label: '用户名称' },
        { prop: 'num', label: '数量' },
        { prop: 'goods_type_name', label: '商品类型名称' },
        { prop: 'goods_title', label: '商品名称' },
        { prop: 'cost_price', label: '成本价/个' },
        { prop: 'sum_cost_price', label: '总成本价' },
        { prop: 'sale_price', label: '销售价/个' },
        { prop: 'sum_sale_price', label: '总销售价', sortable: true },
        { prop: 'status', label: '状态' },
        { prop: 'zip_url', label: 'zip压缩包路径', width: 130 },
    ])

    const page = reactive({
        page: 1,
        limit: 10,
        no: '',
        total: 0
    })
    const tableData = ref < User[] > ([]);
    const getData = async () => {
        const res = await agentOrderList(page)
        tableData.value = res.data.data;
        page.total = res.data.total
    };
    getData();

    const changePage = (val: number) => {
        page.page = val;
        getData();
    };

    // 新增/编辑弹窗相关
    let options = ref < FormOption > ({
        labelWidth: '100px',
        span: 12,
        list: [
            { type: 'input', label: '用户名', prop: 'name', required: true },
            { type: 'input', label: '手机号', prop: 'phone', required: true },
            { type: 'input', label: '密码', prop: 'password', required: true },
            { type: 'input', label: '邮箱', prop: 'email', required: true },
            { type: 'input', label: '角色', prop: 'role', required: true },
        ]
    })
    const visible = ref(false);
    const isEdit = ref(false);
    const rowData = ref({});
    const handleEdit = (row: User) => {
        rowData.value = { ...row };
        isEdit.value = true;
        visible.value = true;
    };
    const updateData = () => {
        closeDialog();
        getData();
    };

    const closeDialog = () => {
        visible.value = false;
        isEdit.value = false;
    };

    // 查看详情弹窗相关
    const visible1 = ref(false);
    const viewData = ref({
        row: {},
        list: []
    });
    const handleView = (row: User) => {
        viewData.value.row = { ...row }
        viewData.value.list = [
            {
                prop: 'id',
                label: '用户ID',
            },
            {
                prop: 'name',
                label: '用户名',
            },
            {
                prop: 'password',
                label: '密码',
            },
            {
                prop: 'email',
                label: '邮箱',
            },
            {
                prop: 'phone',
                label: '电话',
            },
            {
                prop: 'role',
                label: '角色',
            },
            {
                prop: 'date',
                label: '注册日期',
            },
        ]
        visible1.value = true;
    };

    // 删除相关
    const handleDelete = (row: User) => {
        ElMessage.success('删除成功');
    }

    let clickDownload = (url) => {
        ElMessage.success('下载中')
        window.open(url, '_blank')

    }
</script>

<style scoped></style>